<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="rgb(250,250,250)"
    text-color="rgb(1,1,1)"
    active-text-color="rgb(129,139,189)"
    ><el-row>
      <el-col :span="4" style="text-align: center">
        <el-menu-item index="Home"
          ><router-link to="/" tag="li"><el-image style="height:3em;padding:.5em;" :src="logosrc" fit="scale-down"></el-image></router-link></el-menu-item
        ></el-col
      >
      <el-col :span="4" style="text-align: center">
        <el-menu-item v-if="!login" index="Auth"
          ><router-link :to="{ name: 'Auth' }" tag="li"
            >登录/注册</router-link
          ></el-menu-item
        ></el-col
      >
      <el-col :span="4" style="text-align: center">
        <el-menu-item v-if="login" index="User" :key="id"
          ><router-link :to="{ name: 'User', params: { id } }" tag="li"
            >个人中心 <el-avatar shape='square' :src="$store.state.avatar"></el-avatar></router-link
          ></el-menu-item
        ></el-col
      >
      <el-col :span="4" style="text-align: center">
        <el-menu-item v-if="login" index="Notifications"
          ><router-link :to="{ name: 'Notifications' }" tag="li"
            >通知</router-link
          ></el-menu-item
        ></el-col
      >
      <el-col :span="4" style="text-align: center">
        <el-submenu index="2" v-if="login">
          <template slot="title">账号</template>
          <el-menu-item index="2-1"><router-link :to="{name:'Security'}" tag="li">安全</router-link></el-menu-item>
          <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
        </el-submenu></el-col
      >
      <el-col :span="4" style="text-align: center">
        <el-menu-item index="3"
          ><router-link to="/about" tag="li">关于</router-link></el-menu-item
        ></el-col
      >
    </el-row>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      logosrc: require('../assets/logo.png')
    };
  },
  mounted() {
    if(localStorage.selectedNav){
      this.activeIndex = localStorage.selectedNav
    }
  },
  methods: {
    handleSelect(key) {
      localStorage.selectedNav = key
    },
    logout() {
      this.$http.post("logout/").then(() => {
        localStorage.clear();
        this.$store.commit("setLogin", false);
        this.$router.go(0)
      });
    },
  },
  computed: {
    login() {
      return this.$store.state.login;
    },
    id(){
      return this.$store.state.id;
    }
  },
};
</script>

<style>
</style>
